<template>
	<view>
		<view class="index_hd">
			<indexSearch></indexSearch>
			<view class="index_nav">
				<view class="nav_item " :class="indexNum == index?'nav_item_active active_af':''"
					v-for="item,index in navObj" :key="index" @click="getName(item.path,index)">{{item.title}}</view>
			</view>
		</view>
		<!-- 动态路由 -->
		<keep-alive>
			<component :is="indexName"></component>
		</keep-alive>
		<!-- 推荐页轮播图 -->
		<!-- <indexRecommend></indexRecommend> -->
	</view>
</template>

<script>
	import indexSearch from '../../components/indexSearch/indexSearch.vue';
	import indexRecommend from '../../components/indexRecommend/indexRecommend.vue';
	import indexActivity from '../../components/indexActivity/indexActivity.vue';
	import indexAttention from '../../components/indexAttention/indexAttention.vue';
	import indexNotes from '../../components/indexNotes/indexNotes.vue';
	import indexVideo from '../../components/indexVideo/indexVideo.vue'

	export default {
		data() {
			return {
				navObj: [{
					"title": "关注",
					"url": "home/ffeeds/",
					"path": 'indexAttention'
				}, {
					"title": "推荐",
					"url": "home/recommended/",
					"path": 'indexRecommend'
				}, {
					"title": "笔记",
					"url": "home/notes/",
					"path": 'indexNotes'
				}, {
					"title": "视频",
					"url": "home/videos/",
					"path": 'indexVideo'
				}, {
					"title": "活动",
					"url": "home/events/getlists",
					"path": 'indexActivity'
				}],
				// offset: 1, //分页
				// recommendData:null,//收藏页数据
				indexName: "indexRecommend", //动态路由传值
				indexNum: 1, //初始化

			}
		},
		onLoad() {
			// this.getData(this.offset)
		},
		// onReachBottom(){
		// 	console.log('触底了------');
		// 	// 如果不使用组件，可以直接使用onReachBottom来分页，
		// 	// 但是子组件不支持这个生命周期。所以需要通过 uni的emit传递动作来达到目的
		// 	 uni.$emit('onReachBottom');
		// },
		methods: {
			getName(k, p) {
				// console.log(k,p)
				this.indexName = k;
				this.indexNum = p
			}
		},
		components: {
			indexRecommend,
			indexActivity,
			indexAttention,
			indexNotes,
			indexVideo
		}
	}
</script>

<style lang="scss">
	.index_hd {
		width: 100%;
		background-color: #e1e6ff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;

		.index_nav {
			width: 90%;
			height: 90rpx;
			margin: 0 auto;
			padding-top: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.nav_item {
				color: #A0A0A0;
				position: relative;


			}

			.active_af::after {
				content: '';
				display: block;
				width: 70%;
				height: 8rpx;
				border-radius: 20rpx;
				background-color: #FFC830;
				position: absolute;
				bottom: -30%;
				left: 50%;
				transform: translate(-50%, 50%);

			}

			.nav_item_active {
				color: #000;
				font-weight: 400;
				animation: masked .3s linear;
			}
		}
	}

	// css 动画

	@keyframes masked {
		0% {
			transform: translate(0px, 0px);
		}

		25% {
			transform: translate(5rpx, 0px);
		}

		75% {
			transform: translate(-10rpx, 0px);
		}

		100% {
			transform: translate(0px, 0px);
		}
	}
</style>
